Skip to content

Conversation

@kumar-gautam24
Copy link

@kumar-gautam24 kumar-gautam24 commented Nov 29, 2025

Description

Add support for Badge widget in Stac.

Changes Made

Core Implementation:

  • Added badge to WidgetType enum
  • Created StacBadge model class with all Flutter Badge properties (including count/maxCount for Badge.count() support)
  • Created StacBadgeParser to convert JSON → Flutter Badge widget
  • Registered parser in StacService

Files:

  • packages/stac_core/lib/widgets/badge/stac_badge.dart (new)
  • packages/stac/lib/src/parsers/widgets/stac_badge/stac_badge_parser.dart (new)
  • packages/stac_core/lib/foundation/specifications/widget_type.dart (modified)
  • packages/stac/lib/src/framework/stac_service.dart (modified)
  • examples/stac_gallery/assets/json/badge_example.json (new)
  • examples/stac_gallery/assets/json/home_screen.json (modified)

Features

  • Full support for all Flutter Badge properties
  • Badge.count() equivalent functionality via count and maxCount properties
  • Proper validation matching Flutter's Badge behavior
  • Comprehensive examples in stac_gallery

Related Issues

Closes #384

Type of Change

  • New feature (non-breaking change which adds functionality)
  • Bug fix (non-breaking change which fixes an issue)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Code refactor
  • Build configuration change
  • Documentation
  • Chore

Summary by CodeRabbit

  • New Features

    • Added Badge widget support to display status descriptors, counts, or notifications with customizable colors, sizes, and styling.
    • Added a gallery example demonstrating labeled badges, count handling (including maxClamp), small badges on icons, and badges on icon buttons.
    • Added a Home screen entry linking to the Badge example for easy access.
  • Documentation

    • Added docs describing Badge properties, defaults, and JSON examples.

✏️ Tip: You can customize this high-level summary in your review settings.

- Added StacBadge widget to represent notifications and counts.
- Implemented StacBadgeParser for parsing badge JSON configurations.
- Created badge_example.json to demonstrate badge usage in the gallery.
- Updated home_screen.json to include a navigation tile for the badge example.
- Registered StacBadgeParser in the StacService for widget parsing.
@CLAassistant
Copy link

CLAassistant commented Nov 29, 2025

CLA assistant check
All committers have signed the CLA.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 29, 2025

Walkthrough

Adds Badge support: a StacBadge model with JSON (de)serialization, a StacBadgeParser and registration in StacService, WidgetType enum extension, gallery example and home entry, parser export, and documentation.

Changes

Cohort / File(s) Summary
Example Assets
examples/stac_gallery/assets/json/badge_example.json, examples/stac_gallery/assets/json/home_screen.json
New example JSON demonstrating badge variants; home screen updated with a "Stac Badge" list tile linking to the example.
Core Badge Model & Serialization
packages/stac_core/lib/widgets/badge/stac_badge.dart, packages/stac_core/lib/widgets/badge/stac_badge.g.dart, packages/stac_core/lib/widgets/widgets.dart, packages/stac_core/lib/foundation/specifications/widget_type.dart
New StacBadge model (JsonSerializable) with appearance/behavior fields (backgroundColor, textColor, smallSize, largeSize, textStyle, padding, alignment, offset, label, count, maxCount=999, isLabelVisible=true, child). Generated (de)serialization added. WidgetType enum extended with badge. Badge export added.
Parser & Service Registration
packages/stac/lib/src/parsers/widgets/stac_badge/stac_badge_parser.dart, packages/stac/lib/src/parsers/widgets/widgets.dart, packages/stac/lib/src/framework/stac_service.dart
New StacBadgeParser that maps StacBadge JSON to a Flutter Badge widget (count handling, maxCount clamping, label fallback, colors/sizes/padding/alignment/offset). Parser exported and registered in StacService parsers list.
Documentation
docs/widgets/badge.mdx
New documentation page describing properties, examples, and JSON usage for the Badge widget.

Sequence Diagram(s)

sequenceDiagram
  participant Gallery as Gallery JSON
  participant Service as StacService
  participant Parser as StacBadgeParser
  participant Flutter as Flutter Badge Widget

  Gallery->>Service: load JSON asset (`badge_example.json`)
  Service->>Parser: find parser for type "badge" and pass model JSON
  Parser->>Parser: getModel() -> StacBadge.fromJson
  Parser->>Parser: apply count/maxCount/label resolution & map props
  Parser->>Flutter: return constructed Badge widget (child/label/colors/sizes)
  Flutter-->>Gallery: rendered badge UI
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–30 minutes

  • Pay attention to:
    • count validation, maxCount clamping, and label fallback in stac_badge_parser.dart
    • correct mapping between StacBadge fields and Flutter Badge API (sizes, padding, offset, alignment)
    • JSON (de)serialization defaults and null handling in stac_badge.g.dart
    • registration order in stac_service.dart and WidgetType enum insertion

Suggested reviewers

  • Potatomonsta
  • divyanshub024

Poem

🐰
A tiny badge upon my cart,
A number, label, tiny art.
I hop, I parse, I color bright,
JSON-guided, snug and light.
Hooray — your UI gets a little bite!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning The PR implements model, parser, registration, examples, and gallery updates required by #384. However, documentation (docs/widgets/badge.mdx) remains incomplete per reviewer feedback. Add docs/widgets/badge.mdx with widget description, properties table, and example JSON snippets to fully address #384 requirements.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title accurately and concisely describes the main feature added: introducing the stacBadge widget and parser with example JSON assets.
Out of Scope Changes check ✅ Passed All changes are directly scoped to badge widget implementation. No unrelated or out-of-scope modifications detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@kumar-gautam24
Copy link
Author

@divyanshub024 hi can you please review this

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
packages/stac/lib/src/parsers/widgets/stac_badge/stac_badge_parser.dart (1)

21-23: Consider validation instead of assertions for production safety.

The assertions validate count and maxCount, but assertions are disabled in production/release builds. While this matches Flutter's Badge widget pattern, invalid values could pass through silently in production.

Consider adding explicit validation:

-    assert(model.count! >= 0, 'count must be non-negative');
+    if (model.count! < 0) {
+      throw ArgumentError('count must be non-negative');
+    }
     final maxCount = model.maxCount ?? 999;
-    assert(maxCount > 0, 'maxCount must be positive');
+    if (maxCount <= 0) {
+      throw ArgumentError('maxCount must be positive');
+    }
packages/stac_core/lib/widgets/badge/stac_badge.dart (2)

127-147: Enforce or centralize count >= 0 and maxCount > 0 constraints.

The docs state that count must be non‑negative and maxCount must be positive, but the model itself doesn’t enforce this. If validation currently lives only in StacBadgeParser, consider either:

  • Adding simple assertions in the constructor, or
  • Clearly documenting in this file that validation is performed at the parser layer.

This keeps behavior predictable if other consumers instantiate StacBadge directly.


81-95: Align JSON deserialization defaults for maxCount/isLabelVisible with documented values.

You document maxCount as defaulting to 999 and isLabelVisible as effectively default‑true, and you set those as constructor defaults. Depending on your json_serializable configuration, objects built via fromJson may still see these as null when the keys are absent, pushing defaulting logic into the parser.

To keep defaults declarative at the model level and reduce duplication in parsers, consider adding explicit @JsonKey(defaultValue: ...) annotations, e.g.:

@@
-  /// Maximum count value before showing '[maxCount]+' format.
-  ///
-  /// Only used when [count] is provided. Defaults to 999.
-  /// Must be positive (> 0).
-  final int? maxCount;
+  /// Maximum count value before showing '[maxCount]+' format.
+  ///
+  /// Only used when [count] is provided. Defaults to 999.
+  /// Must be positive (> 0).
+  @JsonKey(defaultValue: 999)
+  final int? maxCount;
@@
-  /// If false, the badge's [label] is not included.
-  final bool? isLabelVisible;
+  /// If false, the badge's [label] is not included.
+  @JsonKey(defaultValue: true)
+  final bool? isLabelVisible;

This keeps model semantics consistent whether instances are created directly or via JSON.

Also applies to: 140-147

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 11de03f and 9a3da7b.

📒 Files selected for processing (9)
  • examples/stac_gallery/assets/json/badge_example.json (1 hunks)
  • examples/stac_gallery/assets/json/home_screen.json (2 hunks)
  • packages/stac/lib/src/framework/stac_service.dart (1 hunks)
  • packages/stac/lib/src/parsers/widgets/stac_badge/stac_badge_parser.dart (1 hunks)
  • packages/stac/lib/src/parsers/widgets/widgets.dart (1 hunks)
  • packages/stac_core/lib/foundation/specifications/widget_type.dart (1 hunks)
  • packages/stac_core/lib/widgets/badge/stac_badge.dart (1 hunks)
  • packages/stac_core/lib/widgets/badge/stac_badge.g.dart (1 hunks)
  • packages/stac_core/lib/widgets/widgets.dart (1 hunks)
🔇 Additional comments (10)
packages/stac_core/lib/widgets/badge/stac_badge.g.dart (1)

1-54: LGTM! Generated serialization code.

This is auto-generated JSON serialization code for StacBadge. The default values (maxCount: 999, isLabelVisible: true) align with Flutter's Badge widget behavior.

packages/stac/lib/src/framework/stac_service.dart (1)

101-101: LGTM! Badge parser registered correctly.

The StacBadgeParser is properly registered in the parsers list, following the established pattern.

packages/stac_core/lib/widgets/widgets.dart (1)

9-9: LGTM! Badge widget export added correctly.

The export is properly placed in alphabetical order and follows the established pattern.

packages/stac_core/lib/foundation/specifications/widget_type.dart (1)

24-25: LGTM! Badge enum member added correctly.

The badge widget type is properly documented and alphabetically ordered within the WidgetType enum.

examples/stac_gallery/assets/json/home_screen.json (1)

48-69: LGTM! Badge navigation tile added correctly.

The list tile for Stac Badge follows the established pattern and correctly navigates to the badge example JSON asset.

packages/stac/lib/src/parsers/widgets/widgets.dart (1)

6-6: LGTM! Badge parser export added correctly.

The export is properly placed in alphabetical order.

examples/stac_gallery/assets/json/badge_example.json (1)

1-201: LGTM! Comprehensive badge examples.

This example JSON demonstrates various badge configurations effectively:

  • Label-based badges (text and numeric)
  • Count-based badges with maxCount behavior
  • Small badges for notification dots
  • Badge wrapping interactive widgets

The examples align well with Flutter's Badge widget capabilities.

packages/stac/lib/src/parsers/widgets/stac_badge/stac_badge_parser.dart (2)

26-29: LGTM! Count-to-label conversion logic is correct.

The implementation properly handles maxCount clamping and label generation, matching Flutter's Badge.count behavior:

  • Shows actual count when ≤ maxCount
  • Shows "maxCount+" when count exceeds maxCount

35-47: LGTM! Badge widget construction is correct.

All properties are properly mapped from the StacBadge model to Flutter's Badge widget:

  • Color conversions handled correctly
  • Size properties passed through
  • Style and layout properties parsed appropriately
  • Label and child resolved from model
packages/stac_core/lib/widgets/badge/stac_badge.dart (1)

7-70: Docs and examples for StacBadge are clear and aligned with Flutter Badge.

The top-level documentation plus Dart/JSON snippets mirror Flutter’s Badge semantics and should make both direct Dart usage and server‑driven JSON configuration straightforward. Nice coverage of label vs count/maxCount behavior.

Copy link
Contributor

@Potatomonsta Potatomonsta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kumar-gautam24
Overall looks good! A couple of minor items:

  1. Missing Badge.count convenience constructor: Consider adding a StacBadge.count() factory constructor for better API parity with Flutter's Badge.count().

  2. Badge icon button example issues

    • There seems to be some additional padding on the Badge IconButton example
    • Add "onPressed": { "type": "none" } to the iconButton to enable tap effects

Otherwise solid implementation! 👍

@Potatomonsta
Copy link
Contributor

@kumar-gautam24
Also the PR is missing documentation for the badge widget. Please add docs/widgets/badge.mdx following the same format as other widget docs (e.g., icon_button.mdx), including:

  • Widget description
  • Properties table
  • Example JSON snippets

This will ensure the badge widget is properly documented for users. 😊

@kumar-gautam24
Copy link
Author

Sure will do these and update

…rations

- Created badge.mdx to document the StacBadge widget, including its properties and usage.
- Updated badge_example.json to include padding and onPressed properties for badge examples.
- Enhanced StacBadge class with a convenience constructor for numeric labels based on count.
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
docs/widgets/badge.mdx (2)

21-23: Clarify label vs count interaction and count constraints in docs

The properties table doesn’t currently call out that when count is provided, label is ignored, and that count must be non‑negative and maxCount positive (as enforced/assumed in the Dart model and Flutter’s Badge.count). Consider expanding the label, count, and maxCount rows to spell this out so JSON authors don’t end up with surprising behavior or invalid values.


136-143: Verify alignment JSON shape matches StacAlignmentGeometry expectations

The custom styling example uses:

"alignment": {
  "dx": 1.0,
  "dy": -1.0
}

Please double‑check this matches how StacAlignmentGeometry is documented elsewhere (some APIs use x/y instead of dx/dy). If the canonical shape differs, updating this example will prevent confusion for users copying it.

packages/stac_core/lib/widgets/badge/stac_badge.dart (1)

78-81: Consider centralizing count/maxCount validation beyond the .count factory

Right now, invariants for count and maxCount (non‑negative count, positive maxCount) are only enforced via asserts in StacBadge.count. Instances created via the main constructor or fromJson can carry invalid values through to the Flutter Badge, which will then assert at build time.

To make behavior more predictable for server‑driven JSON:

  • Either move the count >= 0 / maxCount > 0 checks into the primary constructor (or a shared private initializer) so all code paths enforce them, or
  • Add explicit validation in the parser / JSON layer and document how invalid values are handled (e.g., clamped or falling back to defaults).

This isn’t a blocker, but tightening this up would give earlier and clearer feedback when JSON is misconfigured.

Also applies to: 97-105, 121-151, 183-200

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9a3da7b and 077c0ce.

📒 Files selected for processing (3)
  • docs/widgets/badge.mdx (1 hunks)
  • examples/stac_gallery/assets/json/badge_example.json (1 hunks)
  • packages/stac_core/lib/widgets/badge/stac_badge.dart (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • examples/stac_gallery/assets/json/badge_example.json
🔇 Additional comments (1)
packages/stac_core/lib/widgets/badge/stac_badge.dart (1)

7-70: Good, well‑documented model aligned with Flutter’s Badge

The class‑level docs, Dart snippets, and JSON snippets closely mirror Flutter’s Badge semantics and the JSON format exposed in the MDX docs. The added type getter and fromJson/toJson wiring look consistent with other Stac widgets.

@kumar-gautam24
Copy link
Author

@Potatomonsta hi i have added the factory constructor for the Badge.count() can you , review it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Add support for badge widget

3 participants